<script>
export default {
    name: "GTable",
    render() {
        //首列的处理checkbox或者index行号
        //剩余列的处理= slot
        const { g_pageOptions, showPagination } = this;
        return (
            <div >
                {this.renderTable()}
                {showPagination && this.renderPagination(g_pageOptions)}
            </div>

        )
    },
    methods: {
        handleCurrentChange(page) {
            this.$emit('handleCurrentChange', page)
        },
        renderPagination(options) {
            return (
                <el-pagination
                    onSize-change={e => { this.$emit('size-change', e) }}
                    onCurrent-change={this.handleCurrentChange}
                    attrs={options}
                    layout="total, sizes, prev, pager, next, jumper" />
            )
        },
        // 首列的渲染
        renderIndex() {
            return <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
            />
        },
        // 首列的多选
        renderMultiSelect() {
            // 为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
            return <el-table-column
                reserve-selection={true}
                type="selection"
                width="55" />
        },
        renderTable() {
            const { columns, loadingTag, g_options, data, $store: { state: { loadings } } } = this;
            let { useIndex } = g_options;
            let { useMultiSelect } = g_options;
            // jsx中的指令使用v-loading.gbox="true"
            const directives = [
                {
                    name: 'loading',
                    modifiters: {
                        gbox: true
                    },
                    // value:g_options.loading
                    value: loadings[loadingTag]
                },
                {
                    name: 'drag',
                }
            ]
            return (
                <el-table id="gbox"
                    onSelection-change={e => this.$emit('selection-change', e)}
                    {...{ directives }} data={data} attrs={g_options}>
                    {useMultiSelect && this.renderMultiSelect()}
                    {useIndex && this.renderIndex()}
                    {/* 解决: 通过Column能返回一个元素 */}
                    {columns && columns.map((col, i) => {
                        return <GColumn key={i} columns={col} scopedSlots={this.$scopedSlots} />
                    })}
                </el-table>
            )
        },
    },
    computed: {
        // 监视外部属性的改变, 合并本来的配置
        g_options() {
            return Object.assign({}, this.gOptions, this.options)
        },
        g_pageOptions() {
            return Object.assign({}, this.gPageOptions, this.pageOptions)
        }
    },
    data() {
        return {
            // multiSelect: true, // 第一列复选框
            // index: true, //第一列为行号
            gOptions: {
                stripe: true, // 是否为斑马纹 table	
                border: false, // 是否带有纵向边框	
                fit: true, // 列宽度撑开,
                showHeader: true, // 显示表头
                rowKey: 'id',
                useIndex: true, // 行索引
                useMultiSelect: false, // 是否多选

            },
            gPageOptions: {
                currentPage: 1,
                pageSizes: [100, 200, 300, 400], // 显示的可切换
                pageSize: 100, // 当前的size
                total: 400, // 总条数
            }
        };
    },
    props: {
        showPagination: {
            type: Boolean,
            default: () => true
        },
        loadingTag: {
            type: String,
            default: () => ''
        },
        options: {
            type: Object,
            default() {
                return this.gOptions
            }
        },
        pageOptions: {
            type: Object,
            default() {
                return this.gPageOptions
            }
        },
        data: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        }
    },
};
</script>

<style lang="" scoped>

</style>